<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="./fontFace.css">
    <style>
        [class*=" m-icon-"],
        [class^=m-icon-] {
            font-family: element-icons!important;
            speak: none;
            font-style: normal;
            font-weight: 400;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            vertical-align: baseline;
            display: inline-block;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        /*基本样式*/
        
        .m-alert {
            width: 100%;
            padding: 8px 16px;
            margin: 0;
            box-sizing: border-box;
            border-radius: 4px;
            position: relative;
            background-color: #fff;
            overflow: hidden;
            color: #fff;
            display: table;
            transition: opacity .2s;
            margin-top: 10px;
            border: 1px solid #ccc;
        }
        
        .m-content {
            display: table-cell;
            padding: 0 8px;
        }
        
        .m-message {
            font-size: 13px;
            line-height: 18px;
        }
        /*不同状态样式*/
        
        .m-alert-success {
            background-color: #13ce66;
        }
        
        .m-alert-info {
            background-color: #50bfff;
        }
        
        .m-alert-warning {
            background-color: #f7ba2a;
        }
        
        .m-alert-error {
            background-color: #ff4949;
        }
        /*关闭按钮样式*/
        
        .m-closebtn {
            font-size: 12px;
            color: #fff;
            opacity: 1;
            top: 12px;
            right: 15px;
            position: absolute;
            cursor: pointer;
        }
        
        .m-icon-close:before {
            content: "\E60C";
        }
        /*小图标样式*/
        
        .m-icon {
            font-size: 16px;
            width: 16px;
            display: table-cell;
            color: #fff;
            vertical-align: middle;
        }
        
        .m-icon-success:before {
            content: "\E609";
        }
        
        .m-icon-warning:before {
            content: "\E615";
        }
        
        .m-icon-info:before {
            content: "\E615";
        }
        
        .m-icon-error:before {
            content: "\E60B";
        }
        /*自定义图标*/
        
        .m-icon-message:before {
            content: "\E618";
        }
        
        .m-icon-menu:before {
            content: "\E617";
        }
        
        .m-icon-setting:before {
            content: "\E61E";
        }
        
        #app {
            width: 500px;
        }
    </style>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <div class="m-alert m-alert-info">
            <i class="m-icon m-icon-info"></i>
            <div class="m-content">
                <span class="m-message">提醒的内容</span>
                <i class="m-closebtn m-icon-close"></i>
            </div>
        </div>
    </div>
    <script>
        /*
                                                        			alert提醒框有四种状态：
                                                        					info success error warning

                                                        			设置的props：
                                                        				type 提醒框类型 默认为info
                                                        				title 提示信息 '这里有一个消息要提示'
                                                        				closeable 是否禁用关闭 默认为true
                                                        				showicon 是否显示图标 默认为fasle
                                                        				style 设置提醒框样式 默认为{}

                                                        			定制模板：
                                                        				slot为iconTmp  定制icon模板
                                                        				slot为titleTmp 定制提示信息结构

                                                        			监控状态变化：
                                                        				事件名close-click   点击关闭X触发

                                                        		*/
    </script>
</body>

</html>